<template>
	<div class="content" :style="`height:calc( 100% - ${height}px )`" v-loading="listData.length===0" element-loading-text="加载中" element-loading-background="#0000008a">
		<div class="left">
			<!-- <a class="leftItem" href="/#f1" :class="{thisFl:thisFl==='f1'}">分类1</a>
			<a class="leftItem" href="/#f2" :class="{thisFl:thisFl==='f2'}">分类2</a>
			<a class="leftItem" href="/#f3" :class="{thisFl:thisFl==='f3'}">分类3</a> -->
			<div class="leftItem" @click="goId(item.title)" :class="{thisFl:(thisFl===item.title)}" v-for="item in listData">{{item.title}}</div>
		</div>
		<div class="right" ref="right" @scroll="rightScroll">
			<div :title="item.title" id="f1" class="fl" v-for="(item,index) in listData">
				<div class="rightTitle"><!--  :class="{position:thisFl==='f1'}" :style="`top:${bannerHeight}`" -->
					{{item.title}}
				</div>
				<div class="rightAll">
					<div class="rightItem" v-for="(itemChild,indexChild) in item.data">
						<img :src="itemChild.image" width="100" alt="">
						<div class="titleBox">
							<div class="title">{{itemChild.title}}</div>
							<div class="price" v-text="itemChild.price"></div>
							<el-button :disabled="listData[index].data[indexChild].num>=listData[index].data[indexChild].stock" class="number" size="small" v-if="listData[index].data[indexChild].num===0" @click="listData[index].data[indexChild].num++">选择</el-button>
							<el-input-number @change="log" v-else class="number" size="small" v-model="listData[index].data[indexChild].num" :min="0" :max="listData[index].data[indexChild].stock"/>
							<!-- <myNumber></myNumber> -->
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {ref,reactive,onMounted,nextTick,watch} from "vue"
	import content from "../components/content.vue"
	import myNumber from "../components/myNumber.vue"
	// import { ElLoading } from 'element-plus'
	// ElLoading.service({
	// 	"element-loading-text":"123"
	// })
	const loading=ref(true)
	// getList().then(res=>{
	// 	loading.value=false
	// 	if(res.code===0){
	// 		let data=res.data.map(item=>{
	// 			return Object.assign(item,{data:item.data.map(i=>(Object.assign(i,{num:0})))})
	// 		})
	// 		listData.value=data
	// 		thisFl.value=data[0].title
	// 		emit('change',listData.value)

	// 	}else{
	// 		listData.value=[]
	// 	}
	// })
	watch(()=>Props.listData,(val)=>{
		thisFl.value=val[0].title
	})
	const emit=defineEmits(["change"])
	const thisFl=ref("")
	const right=ref(null)
	let obj=ref([])
	let scrollFun=ref(true)

	function log(e){
		console.log("e:",e);
	}

	function goId(id){
		scrollFun.value=false
		thisFl.value=id
		// location.hash=thisFl.value
		obj.value.some((item)=>{
			if(item.value===thisFl.value){
				right.value.scrollTop=item.min
				return true
			}
		})
		setTimeout(()=>{
			scrollFun.value=true
		},100)
	}
	const rightHeight=ref(0)
	function getRightHeight(){
		return document.querySelector(".right")?.scrollHeight
	}
	function getHeight(){
		let fl=document.querySelectorAll(".fl")
		obj=ref([])
		fl.forEach((item,index)=>{//记录
			let min=obj[index-1]?.max||0,
				max=min+item.clientHeight
			obj.value.push({
				min,
				max,
				value:item.title
			})
		})
	} 
	onMounted(()=>{
	})
	function rightScroll(e){
		const getRightHeightMemp=getRightHeight()
		if(rightHeight.value!==getRightHeightMemp){
			rightHeight.value=getRightHeightMemp
			getHeight()
		}
		if(scrollFun.value===false){
			return
		}
		// console.log("e:",e);
		// console.log(e.srcElement.scrollHeight,	e.srcElement.scrollTop);
		obj.value.some(item=>{
			if(scrollFun.value===false){
				return true
			}
			if(e.srcElement.scrollTop>=item.min&&e.srcElement.scrollTop<item.max){
				if(thisFl.value!==item.value){
					thisFl.value=item.value
				}
				return true
			}
		})
	}
	const Props=defineProps({
		height:{
			type:Number,
			default:0
		},
		listData:{
			type:Array,
			default:[]
		}
	})
	
	</script>
	
	<style scoped>
	/* .position{
		position: fixed;
		color: red;
	} */
	.page{
		height: 100vh;
	}
	
	.content{
		background-color: rgb(255, 255, 255);
		display: flex;
		flex-direction: row;
		
	}
	.content>div{
		padding-bottom:50px;
		box-sizing: border-box;
	}
	.left{
		flex-basis:6em;
		background-color: rgb(233, 233, 233);
		text-align: center;
		color:rgb(46, 46, 46);
		font-size: 12px;
	}
	.leftItem{
		display:block;
		line-height: 30px;
		height: 30px;
		/* border-bottom: 1px solid #a2a2a2; */
	}
	.right{
		flex-basis: calc(100% - 6em - 30px);
		height: 100%;
		overflow: auto;
		flex-grow: 1;
		background-color:rgb(255, 255, 255);
		position: relative;
	}
	.right::-webkit-scrollbar{
		width: 0;
	}
	.rightTitle{
		width:100%;
		background-color: #ffffff;
		text-align: center;
		height: 2em;
		line-height: 2em;
		font-weight: bold;
		font-size: 14px;
		color: #2f2f2f;
	}
	.rightItem{
		width:calc( 100% - 30px );
		padding: 10px 15px;
		display: flex;
		flex-direction: row;

		/* height: 60px; */
	}
	.rightAll{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
    	padding: 10px 0;
	}
	.thisFl{
		background-color: #fff;
		color: #000;
	}
	.titleBox{
		width: calc( 100% - 100px );
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}
	.title{
		width: calc( 100% - 1em - 20px);
    	padding: 10px;
		word-break: keep-all;
    	text-overflow: ellipsis;
		overflow: hidden;
	}
	.number{
		align-self: flex-end;
		width: 6em;
	}
	.price{
		color: red;
		align-self: flex-end;
    	padding: 0 1em;
	}
	.price::before{
		content:"￥"
	}
	</style>